<template>
  <div>
    <!-- 部门树 -->
    <div class="height-tree">
      <el-tree :data="deptTree" default-expand-all  node-key="deptId" :props="defaultProps" :filter-node-method="filterNode" ref="tree"
        v-loading="loading" :highlight-current="isHeight" @node-click="nodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
          <div class="chang-mourse">
            <span>{{node.label }}</span>
          </div>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //树形节点
        treeNode: "",
        //绑定树形数据名称
        defaultProps: {
          children: 'children',
          label: 'deptName',
        },
      }
    },
    props: {
      //遮罩层
      loading: {
        type: Boolean,
        default: true
      },
      // 部门数据
      deptTree: {
        type: Array,
        default () {
          return []
        }
      },

      //部门名称
       searchName:{
         type:String,
         default:""
       },

       //是否高亮
       isHeight:{
         type:Boolean,
         default:false
       }
    },
    methods: {

      // 树形筛选
      filterNode(value, data) {
        if (!value) return true;
        return data.deptName.indexOf(value) !== -1;
      },
      // 阻止点击默认
      nodeClick(node, data) {
        this.$emit("nodeClick",node,data)

      }
    },
    watch: {
      searchName:{
        	handler(newData) {
           this.$refs.tree.filter(newData);
          },
          deep: true
      }
    }

  }
</script>

<style lang="scss">
  .custom-tree-node {
    font-size: 14px;
    a {
      margin-left: 10px;

      &:hover i {
        font-weight: 700;

      }
    }
    .el-link.is-underline:hover:after {
      border: none !important;

    }
  }

  .chang-mourse {
    display: flex;
    justify-content: space-between;
    .mou-r {
      margin-right: 10px;
    }
  }

  .height-tree {
    max-height: calc(100vh - 190px);
    overflow: auto;
  }
</style>
